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SEKAPUR SIRIH... 


Selamat berjumpa dengan Hai! Nama saya, Teguh Siluarsa. 


saya, Bela Sipasta. Saya ikon Saya diberi nama oleh ortu 
“Belajar Sendiri Pasti Bisa”. dengan harapan agar “Tekun dan 


tangguh, dan hasilnya luar biasa”. 


Kami berdua akan Jangan khawatir, jika sekarang 

mendampingi Anda Anda belum tahu apa-apa. 

dalam mempelajari Melalui modul-modul yang 
JavaScript. dibahas, Anda akan mendapat 


banyak hal secara luar biasa. 


Ya, Anda akan merasakan Selamat berlayar, mengarungi 


bahwa dengan belajar samudera JavaScript dan mengatasi 
sendiri pun ternyata Anda hambatan dan tantangan serta 


bisa menguasainya. meraih pengalaman sangat 


berharga! Let's go! 
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Tak lupa, saya ingin 


menyampaikan pesan dari 


Semoga 


penyusun modul ini. 
bermanfaat dan 


menjadi inspirasi 


untuk membuat 


karya yang 
berguna! 


Melaka, Okt 14 


Salam, 
& 


Abdul Kadir 
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Mau tahu isi buku ini? Berikut adalah 19 modul 
yang perlu untuk 
didalami. Isinya pasti 
akan memperkaya 


wawasan Anda! 


DAFTAR ISI 


Ba Dasar! Sebaiknya ikuti modul 
ri Dasar! 


secara berurutan. 


— Menangani pengulangan 
Pembuatan Fungsi 
Mengenal Objek dan Cara 
Menciptakannya 
IL9 Bekerja dengan Array 145 
'UL 10 Bekerja dengan Objek Math — 179 
UL 11 Objek Boolean, Date, Function, Selamat berjuang! 
Number, dan RegExp 193 
' MODUL 12 Menangani Kejadian 211 
| MODUL 13 Objek Lain-Lain 231 menggaungkan semangat, 
MODUL 14 Menggunakan try...catch 241 “Belai Ka t 
MODUL 15 Bekerja dengan Formulir 249 kn sa aa 
MODUL 16 Memanfaatkan Cookie 287 
MODUL 17 Menggunakan Peta 299 
MODUL 18 Memanfaatkan Fasilitas DOM 319 
MODUL 19 Aplikasi JavaScript 329 


Mulailah dengan selalu 


Versi Pdf Lengkapnya di ipusnas.com 


.u Belajar Sendiri Pasti Bisa: JavaScript 


Versi Pdf Lengkapnya di ipusnas.com 


Yuk, Memulai dari 
Dasar! 


Di modul ini, Anda akan belajar 
mengenal JavaScript. Anda mulai 
menyiapkan folder-folder untuk 
latihan dan berlatih hal-hal dasar, 
termasuk cara penulisan kode dan 


pencarian kesalahan. 
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Apa yang Perlu Disiapkan Kalau Mau Menggunakan JavaScript? 


nda cukup menggunakan browser seperti Mozilla Firefox atau Internet Explorer. Anda tidak perlu 


menyiapkan web server seperti IIS ataupun Apache. Secara prinsip, tanpa web server pun Anda 
sudah bisa menggunakan JavaScript. 


Perlu diketahui, contoh-contoh dalam buku ini menggunakan HTML5. Itulah sebabnya, siapkan 
browser yang mendukung HTML5. Sebagai contoh, gunakan Firefox 16.x atau Google Chrome. 


Untuk mempermudah penyuntingan kode, gunakan editor teks yang mendukung nomor baris. 
Sebagai contoh, Anda bisa mengunduh Free JavaScript Editor di situs 


http://www.yaldex.com/Free JavaScript Editor.htm. Contoh tampilan editor tersebut seperti berikut. 


Pra Ke 5——— ee 
File Edit View HTML Statements Functions History JScript Tools Debugging Help 

DOS |xXAG “| GR sDas|AY 

B1 jua AM: ANS-N-O  S-O-8- | 3-Hi- o- 

AM- | tm | if ito tor Lin whi dan smi with try YY | wo! |ax 

soda 

O sn |(Elrv| oil (PI |pa untitledi.htm 


B-R) CSS Attibutes AM cntmi» 

(2-9 HTML Attibutes 

3D HTML Events EN Kheadb 

1D HTML Tags 

(B9 JavaScript (Array) EN «titlepc/title» 

RD JavaScript (Date) 
ci 


2 
2-3 JavaScript (Window) 
(3-9 JavaSoript Events 


Output 3 


In10 coll 13 0/00 Unchanged Insert 008KB  NUM | CAP CRL 11/21/2011 | 


Gambar 1.1 Free JavaScript Editor. Versi 4.7 tahun 2009 


Free Java Script Editor ini selain berfungsi sebagai editor juga dapat 
Cc d t d t d n dimanfaatkan untuk memeriksa kesalahan sintaks kode JavaSript. 
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Dasar apa yang perlu saya miliki kalau mau belajar JavaScript? 


inimal Anda tahu dasar HTML. Materi pada buku ini mengasumsikan bahwa Anda tahu cara 
menuliskan HTML dan tahu perintah-perintah dasar yang digunakan. Namun, penjelasan singkat 
tentang tag-tag HTML terkadang dibahas dalam ulasan. 


Kata pepatah, “Di mana ada 
kemauan, di situ ada jalan”. 
Tidak sulit tidak dijamin, deh, 
he..he..he. PD aja! Pemaparan 
langkah demi langkah akan 
membuat segalanya menjadi 
mudah! 


Secara prinsip, struktur dasar kode HTML akan berupa: 


00000 00 


00 


KX!DOCTYPE HTML» 
Shtml» 
thead» 
Ktitle?...«/title» 
«/head» 
«body» 


«/body» 

«/html» 
Sebuah dokumen HTML5 diawali dengan «!DOCTYPE HTML-. 
Tanda seperti Xhtml» disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen dalam dokumen 
html. 
Beberapa tag berpasangan. Sebagai contoh, head» berpasangan dengan «/head». 
Namun, tidak semua tag berpasangan. Sebagai contoh, «br» tidak punya pasangan. 
Pasangan «html»..x/htmI» menyatakan awal dokumen HTML. 
Di dalam Xhtml»..x/html» terdapat pasangan £head»..x/head» dan «body»..«/bodys». 
Pasangan xXhead»..x/head» menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa 
pasangan «title»../title». 
Isian yang berada pada stitle»..x/titles» menentukan judul dalam browser. 
Pasangan «body»..x/body» menyatakan bagian tubuh dokumen. Bagian ini bisa berisi berbagai tag, 


misalnya «div»../divs. 
Modul 1 - Yuk, Memulai dari Dasar! tg 
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dibaca orang lain? 


Apakah kode JavaScript bisa disembunyikan supaya tidak bisa 


ode JavaScript bersifat “terbuka”. Artinya, seluruh kode bisa dibaca oleh orang yang membuka 


situs web. Jadi, tidak ada rahasia yang disembunyikan. Namun, kalau Anda mau, Anda bisa 
membuat kode Anda menjadi susah dibaca oleh orang. Caranya, buang semua karakter pindah 
baris dan spasi yang tidak diperlukan. Agar tidak susah membayangkannya, lihat dua contoh 


berikut. 


€!DOCTYPE HTML» 
€html» 
Chead? 
Ktitle»JavaScript«/titleb 
€/headr 
Sbody2 
Ks3cript type-"text/javascript"» 
var pencacah - 1: 


while (pencacah « 10) ( 
Gocument.write (pencacah # ". JavaScript" 
pencacah - pencacah # 1: 
J 
«/script» 
€/body» 
«/html» 


€ !DOCTYPE HTML» 
€html» 
head» 
€titlebJavaScript«/titleb 
«/headr 
€body? 
«script type-"text/javascript"»var 


# "KbrAin"): 


pencacah-l:while (pencacah«10) (document .write (pencacah#". 
JavaScript"4"«cbr»1n") :pencacah-pencacaht1: x/script» 


«/body» 
«/html» 


Versil 


Bagian yang diarsir abu-abu adalah kode JavaScript. Kedua versi penulisan kode JavaScript tersebut 


memberikan hasil yang sama bagi pemakai. Contoh ditunjukkan di gambar berikut. 
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1. JavaScript 1. JavaScript 
2. JavaScript 2. JavaScript 
3. JavaScript 3. JavaScript 
4. JavaScript 4. JavaScript | 
5. JavaScript 5. JavaScript 
6. JavaScript 6. JavaScript 
7. JavaScript 7. JavaScript 
8. JavaScript 1 8. JavaScript | 
9. JavaScript 9. JavaScript 


Perhatikan bahwa kode JavaScript pada versi pertama lebih mudah kita baca daripada versi kedua. 
Tentu saja, kode pada versi kedua akan menjadi semakin sulit dibaca kalau kode JavaScript terdiri atas 
puluhan baris. Walaupun begitu, disarankan untuk menulis kode yang mudah dibaca oleh orang agar 
mudah dimengerti dan mudah dikembangkan. 


Bagaimana cara untuk mendapatkan hasil seperti di atas? 


nda cukup memanggil nama dokumen HTML di baris alamat (URL) di browser. Sebagai contoh, 
Anda bisa memanggil versil.html dengan cara menuliskan berikut di baris alamat: 
C:VavaScriptlversi1.html 


Hal di atas mengasumsikan bahwa file versil.html berada di folder C:VavaScript. Browser dengan 
sendirinya akan mengubah ke bentuk semacam: 
file:///C:/JavaScript/versi2.html 


v“ Semua file HTML yang digunakan untuk latihan di buku ini 
C atata n diasumsikan berada di folder C: NJavaScript. Oleh karena 
itu, siapkan folder tersebut terlebih dulu. 
v Untuk file-file JavaScript (berekstensi .js), semuanya akan 
diletakkan di subfolder js (di bawah C: NJavaScript). 


Modul 1 - Yuk, Memulai dari Dasar! 8. 
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Good! Hal itu perlu 
Oke. Akan saya dilakukan supaya contoh 
siapkan folder 
CNavaScript dan 


subfolder js 


dan yang Anda praktikkan 


mempunyai lingkungan 


yang sama. 


Jangan lupa, semua file HTML 
(html) diletakkan di folder 
CVavaScript dan semua file 
JavaScript (js) diletakkan di 
subfolder js. 


Sebenarnya, di bagian manakah kode JavaScript diletakkan di 
dokumen HTML? 


mumnya, kode JavaScript diletakkan di dalam pasangan tag «head»..x/head» setelah 
ctitle»..x/titles. Pada contoh di depan, kode JavaScript diletakkan di bagian «body»..xbody-. 
Contoh yang memberikan hasil seperti pada contoh sebelumnya dapat dilihat di skrip berikut. 

Yum File : versi3.html | 


X!DOCTYPE HTML» 
Shtml» 
Shead» 
Ktitle»JavaScript«/title» 
Kscript type-"text/javascript"» 
window.onload — init, 


var teks -— "", 


function init() ( 
var pencacah - 


lj 
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while (pencacah « 10) ( 
teks — teks t pencacah t ". JavaScript" t "«bre1n", 
pencacah - pencacah t 1: 


var elemenInfo - document.getElementById ("info"): 
elemenInfo.innerHTML — teksj 
) 
«/ script» 
«/head» 
Xbody» 
«div id-"info"»«/div» 
«/body2 
«/html» 


Pada contoh di atas, kode JavaScript terletak di xhead»..x/head». Namun, kode JavaScript yang 


digunakan agak berbeda dengan contoh sebelumnya. Di kode JavaScript terdapat perintah: 
window.onload — initj: 


Kode tersebut menyatakan bahwa kalau seluruh elemen di HTML sudah termuat di halaman web 
(dinyatakan dengan atribut onload pada window), fungsi bernama init akan dijalankan. Definisi fungsi 
init adalah seperti berikut: 


function init() ( 


Apakah nama init itu O, tidak. Nama init 


hanya sekadar nama 


bagian dari JavaScript? 


fungsi, yang bisa Anda 


namakan sendiri. 


Jadi, saya tidak harus : 
ai , Betul, mas. Hanya kebiasaan 
menggunakan init kalau begitu? 
para pemrogram menggunakan 


nama tersebut. 


Namun, nama 
seperti 
window.onload 
harus ditulis 
persis seperti 


Modul 1 - Yuk, Memulai dari Dasar! 
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Di dalam fungsi tersebut, perintah 
var teks -— "", 


“n 


digunakan untuk mendeklarasikan variabel bernama teks dan diberi nilai “” (string kosong). String berarti 
deretan karakter. String kosong berarti string yang tidak mengandung satu karakter pun. Variabel ini akan 
dipakai untuk menampung tulisan yang dibangkitkan melalui while. 


Perintah 
var pencacah -— 1j, 


digunakan untuk mendeklarasikan variabel pencacah yang mula-mula diisi dengan angka 1. Variabel ini 
dipakai untuk menghitung dari 1 hingga 9, yang ditangani oleh for. 


Perintah 
while (pencacah « 10) ( 
teks — teks #t pencacah t ". JavaScript" #t "«brb1n"j 


pencacah - pencacah t 1: 


digunakan untuk membentuk tulisan: 
1. JavaScript 

hingga 
9. JavaScript 


dan hasilnya ditampung di variabel teks. Tanda # pada pernyataan berikutlah yang berfungsi untuk 


melakukan penggabungan string: 
teks — teks t pencacah t ". JavaScript" #t "«brbNn": 


“ Tag «br» berguna untuk membuat tulisan berikutnya muncul di baris 
Cc d t d t d n yang berbeda. Efeknya terjadi perpindahan baris di browser. 
v Adapun In menyatakan karakter pindah baris di string dan tidak 
berefek pada browser. Namun, efek pindah baris akan terlihat kalau 
perintah alert () digunakan. 


Perintah 
var elemenInfo - document.getElementById ("info"): 


digunakan untuk memperoleh elemen HTML yang nilai atribut id-nya berupa “info” dan dicatat di 


elemenInfo. Selanjutnya, perintah 
elemenInfo.innerHTML — teks: 


membuat elemen yang dirujuk elemenInfo diisi dengan isi teks. Dengan cara begitu, diperoleh hasil 
yang sama dengan hasil versil.html maupun versi2.html. Perlu diketahui, innerHTML 
menyatakan atribut yang mencatat isi elemen HTML seperti div. 
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Bagaimana kalau saya menghendaki kode JavaScript diletakkan 
terpisah terhadap dokumen html? 


ode JavaScript bisa ditulis pada file berekstensi .js. Sebagai contoh, kode JavaScript berdasarkan 
versi3.html bisa Anda simpan pada file tersendiri dengan nama versi4.js. File ini perlu 
diletakkan di subfolder js yang berada di bawah C: VJavaScript. Isi file ini seperti berikut: 


YM File : versi4.js 


window.onload -— initj 


function init() ( 
var teks — "", 
var pencacah -— 1j 


while (pencacah « 10) ( 
teks - teks t pencacah t ". JavaScript" # "«brb1n": 
pencacah - pencacah t 1: 


var elemenInfo - document .getElementById ("info"): 
elemenInfo.innerHTML — teks: 


) 
Akhir file 


Kode yang perlu diletakkan di file di atas adalah kode yang di versi3.html terletak di antara 
Kscript type-"text/javascript"» 


2» 


an 
«/seript» 


Selanjutnya, lakukan penulisan di file HTML seperti berikut: 
Yum File : versi4.html 


X!DOCTYPE HTML» 
Shtml» 

Shead» 
Ktitle»JavaScript«/title» 
Kscript type-"text/javascript" 

src-"js/versi4.js"» 
«/ script» 

«/head» 

«body» 

«div id-"info"»«/div» 

«/body» 

«/html» 


Akhir file 
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Perhatikan, tag «script» berisi seperti berikut: 
Kscript type-"text/javascript" 
src-"js/versi4.js"» 


Atribut src di tag tersebut menyatakan file JavaScript yang digunakan. Dalam hal ini, file yang dilibatkan 
adalah file versi4.js yang berada di subfolder js. 

Jika file versi4.html ini dipanggil melalui browser, hasilnya akan sama dengan hasil contoh- 
contoh sebelumnya. 


Saya mencoba menguji Javascript. Hasilnya tidak seperti yang 
saya harapkan. Bagaimana saya melacak kesalahan yang terjadi? 


ering kali, hasil yang diharapkan tidak sesuai dengan kenyataan. Sebagai contoh, ketika Anda menguji 

versi4.html, ternyata hasilnya kosong. Tentu, Anda bertanya-tanya, “Kode manakah yang 

menyebabkan kesalahan?” Salah satu cara yang bisa Anda gunakan adalah memeriksa sintaks kode 
yang sudah Anda tulis. Anda bisa menggunakan Free JavaScript untuk melakukan hal itu walau tidak 
sempurna. 


Untuk mempraktikkannya, cobalah untuk menyalin isi versi4.js dan kemudian menyimpannya 
keversi5.js. Lalu, ubahlah sehingga menjadi seperti berikut. 


File : versi5.js 


window.onload -— initj 


function init() ( 
var teks — "", 
var pencacah 1, 


while (pencacah « 10) ( 
teks - teks t pencacah t ". JavaScript" # "«brb1n": 
pencacah - pencacah t 1: 


var elemenInfo - document .getElementById ("info"): 
elemenInfo.innerHTML — teks, 


| 


Akhir file 
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Gambar berikut menunjukkan ada dua karakter yang dihapus. 


5555 Angka 1 setelah - 

window.onload — init: 

dihilangkan 

function init() ( 
var teks — "", 
var pencacah —7f 


while (pencacah « 10) f 
teks — teks # pencacah # ". JavaScript" # "«broMn": 
pencacah — pencacah # 1: 


var elem document .getElementByIld ("info"): 
elemenInfo. inrs teks: 


1 
2 
3 
4 
5 
6 
7 
8 
9 
.0 
23 
2 
3 
4 
5 


Tanda 1 di sini 
dibuang 


Selanjutnya, salinlah file versi4.html menjadi file versi5.html. Lalu, gantilah js/versi4.js 
menjadi js/versi5.js. Jadi, isinya seperti berikut. 


File : versi5.html 


KX!DOCTYPE HTML» 
Sshtml» 

Shead» 
Ktitle»JavaScript«/title» 
Kscript type-"text/javascript" 

src-"js/versi5.js"» 
«/seript» 

«/head» 

«body» 

«div id-"info"»«/div? 

«/body» 

«/html» 


Akhir file 
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Hasilnya adalah seperti berikut: 


KK g 2 
| @) JavaScript - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


K5) & file:///C:/JavaScript/versis.html 


Kesalahan seperti itu jelas terletak di kode JavaScript. Namun, kode manakah yang menjadi 
penyebabnya? Untuk mengetahuinya, silakan menuju ke Free JavaScript Editor yang memuat kode 


y Ry 
8 


versi5.js. Lalu, kliklah pada posisi berikut: . Gambar berikut menunjukkan pesan 


kesalahan di jendela Output. 


window.onload — init: 


WN bb 


function init() ( 
var teks — "": 
var pencacah -: 


TN 


while (pencacah « 10) ( 
teks — teks # pencacah # ". JavaScript" £# "cbrin": 
pencacah — pencacah # 1: 


var elemenInfo — document .getElementByld ("info") : 
elemenInfo.innerHTML — teks: 


Output 


@ Line 5 Column 18 Error: Identifier expected 


Pesan di atas menyatakan bahwa baris 5 kolom 18 ada yang salah. Kesalahannya adalah karena ada 
nilai yang perlu diberikan sesudah tanda sama dengan. Sekarang, berdasarkan keterangan tersebut, Anda 
bisa menambahkan angka 1 sesudah tanda -. 
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Log | 
Setelah penambahan angka 1 tersebut, klik kembali pada posisi R 


Pesan kesalahan sekarang berupa: 


Aa 


window.onload — init: 


function init() ( 
var teks — "" 
var pencacah — 1: 


SJ omwBwuUN hb 


while (pencacah « 10) if 
teks — teks # pencacah # ". JavaScript" 4# "cbrin": 
pencacah — pencacah # 1: 


var elemenInfo — document.getElementByIld ("info"): 
elemenInfo.innerHTML — teks: 


Output 
x) Line 15 Column 1 Error: ) expected 


Pesan kesalahan di atas menyatakan bahwa di baris 15 terdapat kekurangan ). Namun, tentu saja, belum 
tentu kekurangan ) tersebut terletak di baris 15. Sebagai contoh, berdasarkan perintah itu, Anda 
mengetahui posisi yang membutuhkan | adalah di bawah 


pencacah - (pencacah # 1Tambahkan | pada posisi tersebut. 


AA bd 


Setelah penambahan tanda ) tersebut, klik kembali pada posisi Pesan yang terjadi 


berupa: ThereisnoJavaScrpteror —. Hal itu menyatakan bahwa sudah tidak ada kesalahan lagi. 


Walaupun Free JavaScript Editor mengeluarkan V Thesis noJavasotiptertor 
Cc at at a n pesan, belum tentu tidak ada kesalahan secara sintaks di kode JavaScript. 
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Sintaks? Apa sih Maksud sintaks adalah 


2 
maksudnya: aturan, yaitu aturan 


yang diterapkan di 
JavaScript. 


JavaScript itu bahasa pemrograman. 
Nah, kalau browser tidak 


Seperti bahasa manusia, bahasa 
mengerti perintah yang 


pemrograman juga punya aturan. 
diterima, dia akan 


Sebagai contoh, ada mengeluarkan pesan kesalahan. 


tulisan “saya makan” 


dan “saya makin”. Sesalahan Hang 


Yang pertama mudah membuat 


dimengerti. Yang kedua browser tidak 


memahami 
kan membingungkan 


karena ada yang salah. perintah 
tersebut 
dinamakan 
kesalahan secara 


sintaks. 


Fasilitas lain untuk memverifikasi kode JavaScript, yaitu JSLint. Pemverifasi JavaScript buatan 
Douglas Crockford ini tersedia di Free JavaScript Editor. Supaya Anda bisa memanfaatkannya, perlu ada 
sedikit perubahan yang perlu dilakukan karena tampaknya ada bug. Hal yang perlu Anda lakukan sekali 
adalah seperti berikut. 


1. Dengan menggunakan Windows Explorer, pilihlah folder C:VNProgram FilesVYaldex 
Software/Free JavaScript Editor/JSInt. Di folder tersebut terdapat file bernama 
JSLints. 

2. Gantilah namanya menjadi JSLint. 
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Untuk melakukan pengujian dengan JSLint, lakukan langkah seperti berikut. 


1. Klik pada posisi berikut: ' & Ca . Langkah ini akan menampilkan halaman web seperti berikut: 


@ ISlint, The JavaScript Verifier - Mozilla an Ga an ' Ml In ot 
File Edit View History Bookmarks Tools Help - H 
J0— -. . mem sita Bi 


3 file:///C:/Program Files/Yaldex Software/Free JavaScript Editor/JSInt/JSLint.htm c | Pp Y " Search 2 TA | 
Ta ae ———— : 


JSLint 


AP 


The JavaScript Verifier (Read the documentation) Edition 2007-06-13 


m 


«script language-"javascript" type-"text/javascript"» 
function 8 vp getCGI(vs,k) 
fvar vs''jif (kccs wd.location.search) (var g“s wd.location.search, 


ga“g.indexOf ("?") :g“ggs0?g:9g.substring (ggtl) :vss ptig,"s"',s cgif, 


k)!Is vpr(vs,v) function s8 cgif (t,k)tif(t)ivar test.indexOf ('-'), | —3 
Skstec0?t:t.substring (0,te), svstec0?'True' :t.substring(tetl):if ( 
sk—-k)return s epa(sv))return '") 

«/script» 

«/boay» 


«/html» 


Problem at line 10 character 9: The 'language' attribute is deprecated. 
«script language-"javascript" type-"text/javascript"Db 
Problem at line 13 character 55: variable g declared in a block. 


fvar vs" 'jif(kses wd.location.search) (var gs wd.location.search, 


2. Seleksilah kode HTML yang mengandung JavaScript atau kode JavaScript saja dan lakukan 
penyalinan (dengan Ctrl-C). 


3. Klik di tombol Lsiear | untuk mengosongkan isi kotak yang berada di atas tombol . 


4. Lakukan Ctrl-V di kotak yang berada di atas tombol . 


JSLint 
5. Klik di tombol untuk melakukan verifikasi. 


vV JSLint terkadang menyatakan kode yang benar dianggap salah karena 
Cc ad t d t d n suatu aturan ketat yang diterapkan di JSLint ketika verifikasi dilakukan. 
Oleh karena itu, kadang-kadang Anda perlu mengabaikan pesan 

kesalahan tersebut dan langsung mengujinya di browser saja. 
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Jika Anda justru merasa bingung 
dengan pesan-pesan yang 
dikeluarkan oleh JSLint, lupakan 


saja tool ini. 


Anda bisa bertumpu pada 
kesalahan yang bisa dideteksi 


melalui browser. Caranya akan 


dijelaskan. 


Tanda - dihilangkan 


window.onload — init: 


function init() ( 
var teks — "": 
var pencacah 


NU db DN 


4 


6 


while (pencacah « 10) ( 
teks — teks # pencacah # ". JavaScript" # "«cbrMn": 
pencacah — pencacah # 1: 

/ 


yh 0 w 


var elemenInfo — document .getElementById ("info") : 
elemenInfo.innerHTML — teks: 


BW WN kh 


Jika hanya menggunakan JavaScript Editor, kesalahan seperti di atas tidak terdeteksi. Namun, kalau 
menggunakan JSLint, kesalahannya seperti berikut: 


Problem at line 5 character 16: Missing semicolon. 
var pencacah 1: 
Problem at line 5 character 18: Expected an assignment or function call and instead saw an expression. 


var pencacah 1: 


Kesalahannya terletak di baris 5 karakter ke-18. Solusi yang diberikan berupa tanda sama dengan atau 
berupa pemanggilan fungsi. Petunjuk tersebut tentu saja berguna di dalam melakukan koreksi. 
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Jika Anda menggunakan browser Firefox, kesalahan pada kode JavaScript sebenarnya bisa dilihat di 
Error Console. Untuk mengaktifkan Error Console, lakukan langkah-langkah berikut. 


1. Klik pada menu Tools di browser Firefox. 
2. Letakkan penunjuk mouse di Web Developer. 
3. Klik pada Error Console. 


Pada keadaan awal, tampilan Error Console adalah seperti berikut: 


TT 
(@ Error Console 


PP All dik Warnings Ki) Messages | (7) Clear 


Code: 


Evaluate 


Tampilan seperti itu bisa juga diperoleh setelah dilakukan pengklikan pada Oo Clear 5 


Sekarang, Anda bisa mencoba memanggil versi5.html di browser. Hasil di Error Console 


menjadi seperti berikut: 


| @ Error Console 


| II dk, Warnings @) Messages | D gear 


Code: 


Evaluate 


calling method: (nslWebProgresslistener::onProgressChange)" nsresult: "0x80570030 
(NS ERROR XPC JSOBJECT HAS NO FUNCTION NAMED)" location: "sunknown?" data: no) 


11/8/2012 11:34:13 PM 
IException... "JavaScript component does not have a method named: "onProgressChange”" when 
calling method: (nsIWebProgresslistener:onProgressChange)" nsresult: "0x80570030 

(NS ERROR XPC JSOBJECT HAS NO FUNCTION NAMED)" location: "cunknown?" data: no) 
11/8/2012 11:34:18 PM 

SyntaxError: missing : before statement 

file:///C/JavaScript/js/versi5.js 


var pencacah 1: 


Lin: 5 


11/8/2012 11:34:13 PM 

The character encoding of the HTML document was not declared. The document will render with 
garbled text in some browser configurations if the document contains characters from outside the 
US-ASCII range. The character encoding of the page must to be declared in the document or in the 
transfer protocol. 


file:/// G/JavaScript/versi5.html 


e IException... "JavaScript component does not have a method named: "onProgressChange”' when P 
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Informasi terpenting yang perlu kita perhatikan adalah pada SyntaxError. Saran yang diberikan adalah 
memberikan tanda : sebelum angka 1. Walaupun solusinya tidak seperti itu, pesan tersebut paling tidak 
memberikan arahan lokasi yang salah. 

Jika Anda menggunakan Google Chrome, Anda bisa memantau kesalahan dengan menekan 
Ctrl-ShiftJ terlebih dulu. Kemudian, Anda bisa mencoba dokumen yang akan diuji. Berikut adalah contoh 
hasil pemanggilan versi5.html: 


7 DA JavaScript 


Ga CD file:///C/JavaScript/versi5.html - Sean 5 KOK: 0 Rb z 


(B3 tiements “) | Resources @ network “3 Sources & Timeline CG Profiles 


A Resource interpreted as Script but transferred with MIME type text/plain: 
"file:///C:/JavaScript/js/versi5.js". ver 
@Uncaught SyntaxError: Unexpected number 


Aa & ctopframes v CO) trrors Warnings Logs 


Pada contoh di atas, kesalahan yang terjadi berupa: Uncaught SyntaxError: unexpected number. Pesan ini 
menyatakan ada angka yang tidak diharapkan. Kesalahan dinyatakan dalam versi5.html:5. Artinya, 
kesalahan terdapat di file versi5.html baris 5. Seperti halnya di Firefox, pesan kesalahan dapat 
menjadi pedoman untuk membetulkan kode di lokasi yang ditunjukkan. 


Secara sintaks, kode yang saya tulis sudah benar. Namun, 
hasilnya tidak sesuai dengan yang saya harapkan. Apa yang 
harus dilakukan? 


esalahan seperti itu dinamakan sebagai kesalahan logika. Tentu saja, kesalahan logika tidak 
terdeteksi oleh browser ataupun tool apa pun. Untuk memahami kesalahan logika, lihatlah contoh 
berikut: 


YM File : keliling.html 


X!DOCTYPE HTML» 
Shtml» 
Shead» 
Ktitle»JavaScript«/title» 
Kscript type-"text/javascript" 
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